<%--
  Created by IntelliJ IDEA.
  User: yinshankun
  Date: 2020/11/18
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link href="<%=path%>/ysk/css/stylereg.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="<%=path%>/ysk/js/jquery-3.5.1.min.js"></script>
<html>
<head>

    <title>手机号登陆</title>
    <style type="text/css">

        #reg2{background-image: url("<%=path%>/ysk/images/bg.jpg")}
        #reg3{
            margin-top: 1px;
            width: 190px;
        }
        #reg4{
            margin-right: 50px;
            margin-top: 10px;
            padding-top: 10px;
            width: 100px;
            height: 50px;
            float:right;
            display: block;
        }
        #btn{
            width: 80px;
            height: 40px;
            background-color: orange;
        }
        #reg5{
            margin-left: -250px;
            font-size: 20px;
            color: black;


        }
        #reg6{
            width: 20px;
            height: 20px;

        }
        #shouji{
            margin-left: 300px;
            margin-top: -50px;

        }
        #forgetpassword{
            width: 100px;
            height: 50px;
            margin-left: 320px;
            font-size: 20px;

        }
        #reg7{

            float: right;
            width: 30px;
            height: 30px;
         margin-right: 120px;
            margin-top: 20px;
            display: none;

        }
        #reg8{
            float: right;
            margin-top: -45px;
            margin-right: -10px;
            display: none;
        }
        #cuo{
            margin-left: 580px;
            font-size: 30px;


        }
    </style>
</head>
<body>
<h1>Sign in</h1>
<c:if test="${1 eq param.errMes}">
    <span  id="cuo"  style="color:black  "  >用户名未注册</span>
</c:if>
<c:if test="${2 eq param.errMes}">
    <span  id="cuo"  style="color:black  "  >验证码错误</span>
</c:if>
<div id="reg2" class="app-cam">
    <div class="cam"><img src="<%=path%>/ysk/images/cam.png" class="img-responsive" alt="" /></div>
    <form method="post" id="loginform" action="<%=path%>/loginysk">
        <input type="text" placeholder="手机号" name="phonenum" id="phonenum" class="text"   >


        <input type="text" placeholder="验证码" class="yzm" name="phonecode" id="reg3">
        <input type="button" id="reg4" value="获取验证码">
        <div id="reg7">60</div><span id="reg8">秒后可以再次获取</span>

        <div id="reg5"><input id="reg6" name="rememberMe"  type="checkbox"><label for="reg6">记住我</label></div>
        <div id="forgetpassword"><a href="<%=path%>/forgetpager">忘记密码？</a></div>
        <div class="submit"><input type="button" id="btn"  value="登录" ></div>
        <div id="shouji"><a href="<%=path%>/loginpager">账号密码登陆</a></div>



    </form>
</div>

</body>
</html>


<script type="text/javascript">
    <!--检查手机号是否注册和格式-->
    $("#phonenum").blur(checkphonenum)
    $("#reg3").blur(checkphonecode);
    $("#btn").click(function () {
        $("#loginform").submit();
    })

    function checkphonenum() {

        var phonenum=$("#phonenum").val();
        var reg=/^[1][3,,5,7,8,9][0-9]{9}$/;
        if(reg.test(phonenum))
        {
            $.ajax({
                url:"<%=path%>/checkuserphone",
                async:false,
                method:"post",
                data:{phonenum:phonenum},
                success:function (mes) {
                    if(mes=="yes")
                    {


                    }
                    else {

                        $("#phonenum").select();
                        $("#phonenum").val("")
                        $("#phonenum").attr("placeholder","号码未注册")

                    }
                }
            })

        }
        else {
            $("#phonenum").attr("placeholder","请输入正确手机号")
            $("#phonenum").val("");
            $("#phonenum").select();

        }





    }





<!--检查验证码是否正确-->


    function checkphonecode() {

        var phonenum=$("#reg3").val();
        $.ajax({
            url:"<%=path%>/checkphonecode",
            async:false,
            method: "post",
            data:{phonenum:phonenum},
            success:function (mes) {
                if(mes=="yes")
                {


                }
               if(mes=="no") {
                    $("#reg3").val("");
                   $("#reg3").attr("placeholder","验证码不正确");
                    $("#reg3").select();


                }

            }
        })

    }
</script>








<!--隐藏按钮 显示计时-->
<script>
    $("#reg4").click(function () {
        $("#reg7").css("display","block")
        $("#reg8").css("display","block")
        $("#reg4").css("display","none")
    });


</script>
<!--计时-->
<script>

    $("#reg4").click(jishi);
    function start() {

        var num=$("#reg7").html()
        num=num-1;

        $("#reg7").html(num);
        if(num==0)
        {
            clearInterval(t);
            $("#reg7").html(60);

            $("#reg7").css("display","none")
            $("#reg8").css("display","none")
            $("#reg4").css("display","block")
        }


    }
    var t;
    function jishi()
    {
        t = setInterval(start,1000);


    }

</script>
<!--发送手机验证码-->
<script>

    $("#reg4").click(checkphonecode)
    function checkphonecode() {


        var phone=$("#phonenum").val()
        var str = '0123456789';
        var code = '';
        for(i=0;i<6;i++){
            var n=parseInt(Math.random()*str.length)
            code+=str[n]
        }
        $.ajax({
            url:"<%=path%>/phonenum",
            async:false,
            data:{phone:phone,code:code},
            method:"post",
            success:function (mes) {

            }
        })

    }

</script>